import React, { Component } from 'react';
import { withRouter } from "react-router-dom";
import myaxios from "../../untils/myaxios"
import { NavBar, Icon, Tabs } from 'antd-mobile';
import SearchInput from "../searchInput/SearchInput";
import "./GoodList.scss"
class GoodList extends Component {
    state = {
        goodsList: [],
        tabs: [
            { title: '综合' },
            { title: '销量' },
            { title: '价格' },
        ]
    }
    // 返回上一页
    handleForward() {
        window.history.go(-1)
    }
    componentDidMount() {
        console.log(this.props.match.params.query);
        let query = this.props.match.params.query;
        myaxios.get("goods/search", {
            params: {
                query,
            }
        }).then(res => {
            this.setState({
                goodsList: res.goods,
            })
            console.log(res);
        })
    }
    render() {
        return (
            <div className="wx-goods">
                {/* 商品列表头部开始 */}
                <div className="wx-goods-head">
                    <NavBar className="goods-nav-head" icon={<Icon onClick={this.handleForward} type="left" />}>商品列表</NavBar>
                </div>
                {/* 商品列表头部结束 */}
                {/* 搜索按钮开始 */}
                <SearchInput></SearchInput>
                {/* 搜索按钮结束*/}
                {/* 商品列表内容开始 */}
                <div className="wx-goods-content">
                    <Tabs tabs={this.state.tabs} initialPage={0} animated={false} useOnPan={false}>
                        <div className="goods-content-list">
                            {
                                this.state.goodsList.map(v => {
                                    return <div className="goods-list-item" key={v.goods_id}>
                                                <div className="goods-item-left">
                                                    <img src={v.goods_small_logo} alt="" />
                                                </div>
                                                <div className="goods-item-right">
                                                    <div className="goods-name">{v.goods_name}</div>
                                                    <div className="goods-price">￥{v.goods_price}</div>
                                                </div>
                                            </div>
                                })
                            }
                        </div>
                        <div>销量内容 </div>
                        <div>价格内容</div>
                    </Tabs>
                </div>
                {/* 商品列表内容结束 */}
            </div>
        );
    }
}

export default withRouter(GoodList);
